<template>
  <div class = "count-box">
    <button class="minus" @click="reduceCount">-</button>
    <input class="inp" type="number" :value="value" @change="changeCount"/>
    <button class="add" @click="addCount">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    totalStock: Number
  },
  methods: {
    addCount () {
      console.log(this.value)
      console.log('4324', this.totalStock)
      const addVal = this.value + 1
      if (addVal > this.totalStock) {
        return
      }
      this.$emit('input', addVal)
    },
    reduceCount () {
      const reduceCount = this.value - 1
      if (reduceCount <= 0) {
        return
      }
      this.$emit('input', reduceCount)
    },
    changeCount (el) {
      console.log(324324)
      const inputVal = +el.target.valueAsNumber
      if (isNaN(inputVal) || inputVal < 0) {
        el.target.value = this.value
        return
      }
      if (inputVal > this.totalStock) {
        el.target.value = this.value
        return
      }
      this.$emit('input', inputVal)
    }
  }
}
</script>

<style lang="less" scoped>
.count-box {
  width: 110px;
  display: flex;
  .add, .minus {
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    background-color: #efefef;
  }
  .inp {
    width: 40px;
    height: 30px;
    outline: none;
    border: none;
    margin: 0 5px;
    background-color: #efefef;
    text-align: center;
  }
}
</style>
